<template>
	<view class="container">
		<scroll-view>
			<view v-for="(item, index) in logs" :key="index" class="item">
				<view class="top flex-row warning">
					<view class="circle"></view>
					<view class="dots">······</view>
					<view class="time">{{ item.addtime }}</view>
					<view class="dots">······</view>
					<text class="name">{{ item.addman }}</text>
				</view>
				<view class="bottom">{{ item.text }}</view>
			</view>
			<view class="nodata">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			logs: []
		}
	},
	onLoad(option) {
		this.getLogs(option.id);
	},
	methods: {
		// 获取日志列表
		getLogs(id){
			let _this = this;
			uni.request({
				method: 'GET',
				url: this.$API.dangerHandleLog,
				data: {
					sspid: id,
					userid: uni.getStorageSync('userid')
				},
				success: (res)=>{
					_this.logs = res.data.data;
				}
			})
		}
	}
}
</script>

<style scoped>
scroll-view{
	padding: 30upx;
	box-sizing: border-box;
}
.flex-row{
	display: flex;
	align-items: center;
}
.item .top{
	font-size: 26upx;
}
.item .top.warning{
	color: orange;
}
.item .top.warning .circle{
	background: orange;
}
.item .top.warning .circle::after{
	border-color: orange;
}
.item .top .circle{
	width: 20upx;
	height: 20upx;
	background: #999;
	border-radius: 50%;
	margin: 0 20upx 0 10upx;
	position: relative;
}
.item .top .circle::after{
	content: '';
	width: 32upx;
	height: 32upx;
	border: 2upx solid #999;
	border-radius: 50%;
	position: absolute;
	top: -6upx;
	left: -6upx;
}
.item .top .name{
	margin-left: 10upx;
}
.item .bottom{
	font-size: 28upx;
	padding-left: 50upx;
}
.nodata{
	text-align: center;
	color: #999;
	font-size: 28upx;
	padding: 40upx;
}
</style>
